<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    {CSS href="__ADDONSTATIC__css/font.css" /}
    {CSS href="__ADDONSTATIC__css/xadmin.css" /}
    {js href='__ADDONSTATIC__js/jquery-3.2.1.min.js' /}

    {js href='__ADDONSTATIC__js/xadmin.js' /}
    {js href='__ADDONSTATIC__js/util.js' /}
    {js href='__ADDONSTATIC__lib/layui/layui.js' /}
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<style>
    .layui-table td, .layui-table th{
        padding:6px 5px;
    }
</style>
<!--<blockquote class="layui-elem-quote">欢迎管理员：
    <span class="x-red">test</span>！当前时间:2018-04-25 20:50:53
</blockquote>-->

<div class="x-body" id="app">
    <div>
        <a class="layui-btn" href="{:addonUrl('Admin/addProject')}"><i class="layui-icon"></i>添加</a>
        <form name="search" action="" class="layui-form x-right">
            <input class="layui-input" name="keyword" v-model="keyword" style="width: 200px;float: left" type="text"
                   autocomplete="off" placeholder="输入项目名称">
            <div class="layui-btn" @click="getListInfo(1)">查询</div>
        </form>
        <div style="clear: both"></div>
        <div>
            <span>共{{count}}条数据 &nbsp;&nbsp; 第{{pageIndex}}页 &nbsp;&nbsp; 共{{pageCount}}页 </span>
        </div>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <th>序号</th>
            <th>项目名称</th>
            <th>项目经理</th>
            <th>开发商</th>
            <th>开发商负责人</th>
            <th>负责人电话</th>
            <th>坐落位置</th>
            <th>当前状态</th>
            <th>评价</th>
            <th>状态变更</th>
            <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in pageList">
            <td>{{(pageIndex-1) * pageMaxSize + index + 1 }}</td>
            <td>{{item.name}}</td>
            <td>{{item.manager}}</td>
            <td>{{item.developers}}</td>
            <td>{{item.developersCharge}}</td>
            <td>{{item.chargePhone}}</td>
            <td>{{item.position}}</td>
            <td>{{item.description ? item.description : "无"}}</td>
            <td>
                <div class="layui-btn layui-btn-normal layui-btn-xs" @click="pingjia(item.id)">评价
                </div>
            </td>
            <td>
                <div class="layui-btn layui-btn-xs layui-btn-normal" @click="changeStatus(item.id)">
                    状态变更
                </div>
            </td>
            <td>
                <div class="layui-btn-group" style="display: inline-flex">
                    <div class="layui-btn layui-btn-xs" @click="modify(item.id)"><i class="layui-icon">
                        &#xe642;</i></div>
                    <div class="layui-btn layui-btn-xs" @click="remove(item.id)"><i class="layui-icon">
                        &#xe640;</i></div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="page" v-if="pageCount !='' && pageCount > 0">
        <div>
            <a class="prev" @click="getListInfo(1)">首页</a>
            <a class="num" v-if="pageIndex > 1" @click="getListInfo(pageIndex - 1)">上一页</a>
            <a class="num" v-if="pageIndex-2 > 1" @click="getListInfo(pageIndex - 2)">{{pageIndex-2}}</a>
            <a class="num" v-if="pageIndex-1 > 1" @click="getListInfo(pageIndex - 1)">{{pageIndex-1}}</a>
            <span class="current">{{pageIndex}}</span>
            <a class="num" v-if="pageIndex*1+1 < pageCount"
               @click="getListInfo(pageIndex*1+1)">{{pageIndex*1+1}}</a>
            <a class="num" v-if="pageIndex*1+2 < pageCount"
               @click="getListInfo(pageIndex*1+2)">{{pageIndex*1+2}}</a>
            <a class="num" v-if="pageIndex < pageCount" @click="getListInfo(pageIndex*1 + 1)">下一页</a>
            <a class="next" @click="getListInfo(pageCount)">末页</a>
        </div>
    </div>
</div>


<!--vue js-->
<script>

    var app = new Vue({
        el: '#app',
        data: {
            keyword: "",
            pageList: "",
            count: "",
            pageIndex: "1",
            pageSize: "",
            pageMaxSize:"10",
            pageCount: ""
        }
    });

    /**
     * 获取项目列表
     * @param pageIndex
     */
    var getListInfo = function getListInfo(pageIndex) {
        var url = "{:addonUrl('Admin/getProjectList')}";
        var _self = app;
        ajaxUrl(url, {pageIndex: pageIndex,pageMaxSize:_self.pageMaxSize, keyword: _self.keyword}, function (data) {
            _self.pageList = data.result.pageList;
            _self.count = data.result.count;
            _self.pageIndex = data.result.pageIndex;
            _self.pageSize = data.result.pageSize;
            _self.pageCount = data.result.pageCount;
        });
    }

    $(document).ready(function () {
        getListInfo(1);
    });

//    layui.use('table', function(){
//        var table = layui.table;
//        //第一个实例
//        var tableObj = table.render({
//            elem: '#table'
//             ,id:'table'
//            ,height: 312
//            ,url: '{:addonUrl('Admin/getProjectList')}' //数据接口
//            ,method:'post'
//            ,parseData:function(res){
//                console.log(res);
//                res = JSON.parse(res);
//                return {
//                    "code": res.code, //解析接口状态
//                    "msg": res.message, //解析提示文本
//                    "count": res.result.count, //解析数据长度
//                    "data": res.result.pageList //解析数据列表
//                }
//            }
//            ,request:{
//                pageName:'pageIndex'
//            }
//            ,response:{
//                statusCode:1,
//            }
//            ,page: true //开启分页
//            ,cols: [[ //表头
//                {title: '序号',width: 80,sort:true,templet:'#indexTpl'}
//                ,{field: 'name', title: '项目名称', sort: true}
//                ,{field: 'manager', title: '项目经理',width:100, sort: true}
//                ,{field: 'developers', title: '开发商',width:100, sort: true}
//                ,{field: 'developersCharge', title: '开发商负责人',width:120,sort: true}
//                ,{field: 'chargePhone', title: '负责人电话',width:120, sort: true}
//                ,{field: 'position', title: '坐落位置',sort: true}
//                ,{field: 'description', title: '当前状态', width:100,sort: true}
//            ]]
//        });
//
//    });



    /**
     * 删除
     * @param $pId
     */
    var remove = function (id) {
        layer.confirm('确认删除项目？', function (index, layero) {
            ajaxUrl("{:addonUrl('Admin/removeProject')}", {id: id}, function (res) {
                layer.close(index);
                if (res.code = 1) {
                    getListInfo(app.pageIndex);
                }
            })
        })
    }

    function modify(projectId) {
        x_admin_show('修改界面', '{:addonUrl('Admin/updateProject')}?projectId=' + projectId, '', '', function () {
            getListInfo(app.pageIndex);
        });
    }

    function pingjia(projectId) {
        x_admin_show('评价界面', '{:addonUrl('Admin/evaluate')}?projectId=' + projectId);
    }

    function changeStatus(projectId) {
        x_admin_show('修改状态', '{:addonUrl('Admin/changeStatusPage')}?projectId=' + projectId, '500', '300', function () {
            getListInfo(app.pageIndex);
        });
    }
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

</body>
</html>